<template>
  <div class="price-overview">
    <div class="overview-header">
      <h3 class="header-title">{{ $t('priceChart.nearProtocol') }}</h3>
      <div class="refresh-btn" @click="loadPriceData">
        <el-icon :class="{ 'rotate': isLoading }">
          <Refresh />
        </el-icon>
      </div>
    </div>

    <div class="price-main">
      <div class="price-label">{{ $t('priceChart.realTimePrice') }}</div>
      <div class="price-value">{{ formatKRW(nearPrice) }}</div>
      <div class="price-change" :class="changeClass">
        <span class="change-icon">{{ changeIcon }}</span>
        <span class="change-text">
          {{ formatKRW(Math.abs(priceChange24h)) }} ({{ Math.abs(changeRate24h).toFixed(2) }}%)
        </span>
      </div>
    </div>

    <div class="price-stats">
      <div class="stat-card">
        <div class="stat-label">{{ $t('priceChart.volume24h') }}</div>
        <div class="stat-value">{{ formatVolume(volume24h) }}</div>
      </div>
      <div class="stat-card">
        <div class="stat-label">{{ $t('priceChart.change24h') }}</div>
        <div class="stat-value" :class="changeClass">
          {{ changeRate24h >= 0 ? '+' : '' }}{{ changeRate24h.toFixed(2) }}%
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { walletApiService } from '@/services/walletApi'
import { formatKRW } from '@/utils/currency'

const isLoading = ref(false)

// NEAR价格数据
const nearPrice = ref(0)
const priceChange24h = ref(0)
const changeRate24h = ref(0)
const volume24h = ref(0)

// 计算变化样式
const changeClass = computed(() => {
  return changeRate24h.value >= 0 ? 'positive' : 'negative'
})

const changeIcon = computed(() => {
  return changeRate24h.value >= 0 ? '▲' : '▼'
})

// 格式化交易量
const formatVolume = (value: number) => {
  if (value >= 1000000000) {
    return `₩${(value / 1000000000).toFixed(2)}B`
  } else if (value >= 1000000) {
    return `₩${(value / 1000000).toFixed(2)}M`
  } else if (value >= 1000) {
    return `₩${(value / 1000).toFixed(2)}K`
  }
  return formatKRW(value)
}

// 加载价格数据
const loadPriceData = async () => {
  if (isLoading.value) return

  isLoading.value = true
  try {
    const assetData = await walletApiService.getNearAsset()

    nearPrice.value = assetData.priceKRW
    priceChange24h.value = assetData.change24h
    changeRate24h.value = assetData.changeRate24h
    volume24h.value = assetData.totalValue || 0 // 使用totalValue作为交易量的占位
  } catch (error) {
    console.error('가격 데이터 로드 실패:', error)
  } finally {
    setTimeout(() => {
      isLoading.value = false
    }, 500)
  }
}

onMounted(async () => {
  await loadPriceData()
})
</script>

<style scoped lang="scss">
.price-overview {
  background: white;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;

  .overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .header-title {
      font-size: 18px;
      font-weight: 700;
      color: #1a202c;
      margin: 0;
    }

    .refresh-btn {
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;
      transition: background 0.2s ease;

      &:hover {
        background: #f1f5f9;
      }

      .el-icon {
        font-size: 18px;
        color: #64748b;
        transition: transform 0.5s ease;

        &.rotate {
          animation: spin 1s linear infinite;
        }
      }
    }
  }

  .price-main {
    background: linear-gradient(135deg, #00D2FF 0%, #0099CC 100%);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 20px;
    text-align: center;

    .price-label {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 12px;
      font-weight: 500;
    }

    .price-value {
      font-size: 48px;
      font-weight: 700;
      color: white;
      margin-bottom: 12px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .price-change {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;

      &.positive {
        color: #86efac;
      }

      &.negative {
        color: #fca5a5;
      }

      .change-icon {
        font-size: 14px;
      }
    }
  }

  .price-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;

    .stat-card {
      background: #f8fafc;
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      transition: all 0.2s ease;

      &:hover {
        background: #f1f5f9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      }

      .stat-label {
        font-size: 13px;
        color: #64748b;
        margin-bottom: 8px;
        font-weight: 500;
      }

      .stat-value {
        font-size: 20px;
        font-weight: 700;
        color: #1a202c;

        &.positive {
          color: #10b981;
        }

        &.negative {
          color: #ef4444;
        }
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .price-overview {
    padding: 20px;

    .price-main {
      padding: 28px;

      .price-value {
        font-size: 42px;
      }
    }

    .price-stats {
      gap: 12px;

      .stat-card {
        padding: 18px;

        .stat-value {
          font-size: 18px;
        }
      }
    }
  }
}

@media (max-width: 520px) {
  .price-overview {
    padding: 16px;

    .price-main {
      padding: 24px;

      .price-value {
        font-size: 36px;
      }

      .price-change {
        font-size: 14px;
      }
    }

    .price-stats {
      grid-template-columns: 1fr;
      gap: 12px;

      .stat-card {
        padding: 16px;
      }
    }
  }
}
</style>